import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/blocks';
import { userEvent } from '@storybook/testing-library';
import { centeredLayout } from '../../utilities/chromatic-decorators';

<Meta
  title="Components/Tooltip"
  component="bl-tooltip"
  parameters={{
    chromatic: { viewports: [1000] },
  }}
  decorators={[
    centeredLayout,
  ]}
  argTypes={{
    placement: {
      control: 'text'
    }
  }}
/>

export const tooltipOpener = async ({ canvasElement }) => {
  const button = canvasElement.querySelector('bl-button')
  await userEvent.click(button);
}

export const IconTriggerTemplate = (args) => html`
<bl-tooltip placement="${ifDefined(args.placement)}">
  <bl-button slot="tooltip-trigger" icon="settings" variant="tertiary" kind="neutral" label="Settings" variant="secondary"></bl-button>
  Settings
</bl-tooltip>`

export const ButtonTriggerTemplate = (args) => html`
<bl-tooltip placement="${ifDefined(args.placement)}">
  <bl-button slot="tooltip-trigger" icon="plus_fill"></bl-button>
  You can add text, photos and graphics. If you put a very long text, it will be wrapped after max-length of the tooltip.
</bl-tooltip>`


export const PlacementTemplate = (args) => html`
<bl-tooltip placement="${ifDefined(args.placement)}">
  <bl-button slot="tooltip-trigger">${args.placement}</bl-button>
  You can use this section to cancel your order.
</bl-tooltip>`

export const TargetAttrTemplate = (args) => html`
<bl-tooltip placement="${ifDefined(args.placement)}" target="trigger-btn">
  Target Attribute
</bl-tooltip>
<bl-button id="trigger-btn">With Target</bl-button>
`;

# Tooltip

<bl-badge icon="document">ADR</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3611)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Tooltips display informative text when users hover over an element.

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

## Basic Usage

Tooltip can be used with any trigger such as button, icon, text, etc.
Only you have to give slot name as `tooltip-trigger`. The remaining content will be shown in the tooltip hovering over the trigger component.

<Canvas>
  <Story name="Usage With Icon Button" play={tooltipOpener}>
    {IconTriggerTemplate.bind({})}
  </Story>
  <Story name="Usage With Button" play={tooltipOpener}>
    {ButtonTriggerTemplate.bind({})}
  </Story>
</Canvas>

## Placement

You can give `placement` for tooltip direction.The position of the tooltip and arrow change according to this property.  Default placement is `top`.

You can use the other options:

* `top-start`
* `top`
* `top-end`
* `bottom-start`
* `bottom`
* `bottom-end`
* `left-start`
* `left`
* `left-end`
* `right-start`
* `right`
* `right-end`

If there is not enough room for the tooltip in the given placement, the tooltip is repositioned automatically according to the empty area.

For example, if there is not enough room on the top, the tooltip is shown on the bottom.

<Canvas>
  <Story name="Top-Start Placement"
    args={{ placement: 'top-start' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Top Placement"
    args={{ placement: 'top' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Top-End Placement"
    args={{ placement: 'top-end' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Bottom-Start Placement"
    args={{ placement: 'bottom-start' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Bottom Placement"
    args={{ placement: 'bottom' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Bottom-End Placement"
    args={{ placement: 'bottom-end' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Left-Start Placement"
    args={{ placement: 'left-start' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Left Placement"
    args={{ placement: 'left' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Left-End Placement"
    args={{ placement: 'left-end' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Right-Start Placement"
    args={{ placement: 'right-start' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Right Placement"
    args={{ placement: 'right' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
  <Story name="Right-End Placement"
    args={{ placement: 'right-end' }}
    play={tooltipOpener}>
    {PlacementTemplate.bind({})}
  </Story>
</Canvas>

## Target Attribute

By using the target attribute, we can add a tooltip to the element.

<Canvas>
  <Story name="Usage With Target Attribute" play={tooltipOpener}>{TargetAttrTemplate.bind({})}</Story>
</Canvas>

## RTL Support

The tooltip component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-tooltip placement="right">
            <bl-button slot="tooltip-trigger" icon="info">Help</bl-button>
            Click here for more information about this feature
          </bl-tooltip>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-tooltip placement="left">
            <bl-button slot="tooltip-trigger" icon="info">مساعدة</bl-button>
            انقر هنا لمزيد من المعلومات حول هذه الميزة
          </bl-tooltip>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Tooltip RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }
    .tooltip-group {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div class="tooltip-group">
        <h3>LTR Tooltip</h3>
        <bl-tooltip placement="right">
          <bl-button slot="tooltip-trigger" icon="info">Help</bl-button>
          Click here for more information about this feature
        </bl-tooltip>
      </div>

      <!-- RTL Example -->
      <div class="tooltip-group" dir="rtl">
        <h3>RTL Tooltip</h3>
        <bl-tooltip placement="left">
          <bl-button slot="tooltip-trigger" icon="info">مساعدة</bl-button>
          انقر هنا لمزيد من المعلومات حول هذه الميزة
        </bl-tooltip>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a tooltip programmatically
    const createTooltip = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const tooltip = document.createElement('bl-tooltip');
      tooltip.placement = isRTL ? 'left' : 'right';

      const button = document.createElement('bl-button');
      button.slot = 'tooltip-trigger';
      button.icon = 'info';
      button.textContent = isRTL ? 'مساعدة' : 'Help';

      tooltip.textContent = isRTL
        ? 'انقر هنا لمزيد من المعلومات حول هذه الميزة'
        : 'Click here for more information about this feature';

      tooltip.appendChild(button);
      container.appendChild(tooltip);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-tooltip" />
